<template>
    <div>
        <el-card>
            <h3 class="title">详细信息
            <el-button size="small" style="float: right;" type="success" icon="el-icon-download" @click="exportList">导出</el-button>
            <el-button size="small" style="float: right; margin-right:10px" type="info" icon="el-icon-back" @click="goBack">返回</el-button>
            </h3>
            <el-form label-width="140px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="清单名称：">
                            {{ detailData.itemName|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="清单状态：">
                             {{filterStatus(listStatus,detailData.itemStatus).value  || '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="清单总额：">
                            {{ detailData.itemAmount|| '-'}} 元
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结算金额：">
                            {{ detailData.settAmount|| '-'}} 元
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="申请方名称：">
                            {{ detailData.appName|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请方电话：">
                            {{ detailData.appPhone|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="申请时间：">
                            {{ detailData.appTime|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="接收方名称：">
                            {{ detailData.receName|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="是否确认：">
                            <span v-if="detailData.isConfirm == 0">未确认</span>
                            <span v-if="detailData.isConfirm == 1">已确认</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="确认时间：">
                            {{ detailData.confirmTime|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否结算：">
                            <span v-if="detailData.isSett == 0">未结算</span>
                            <span v-if="detailData.isSett == 1">已结算</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结算时间：">
                            {{ detailData.settTime|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="是否开票：">
                            <span v-if="detailData.isInvoice == 0">未开票</span>
                            <span v-if="detailData.isInvoice == 1">已开票</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开票时间：">
                            {{ detailData.invoiceTime|| '-'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="发票文件：">
                            <el-button type="text" @click="downloadFile(detailData.invoiceFile)" v-if="detailData.invoiceFile">
                                点击下载发票文件
                            </el-button>
                            <span v-else>-</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结算凭证：">
                            <el-button type="text" @click="downloadFile(detailData.settFile)" v-if="detailData.settFile">
                                点击下载结算凭证
                            </el-button>
                            <span v-else>-</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注：">
                            {{ detailData.remark|| '-'}}
                        </el-form-item>
                    </el-col>
                </el-row>
           
            </el-form>
            <el-row class="order_list_title">
                <el-col :span="12">
                    <h3>订单列表</h3>
                </el-col>
                <el-table :data="tableData" :header-cell-style="{padding:'5px 0px'}" border>
                    <el-table-column prop="id" label="订单编号" min-width="90" align="center"></el-table-column>
                    <el-table-column prop="orderTime" label="订单时间" align="center"></el-table-column>
                    <el-table-column prop="orderAmount" label="订单金额(元)" min-width="50" align="center"></el-table-column>
                    <el-table-column prop="bidderName" label="投标人名称" min-width="60" align="center"></el-table-column>
                    <el-table-column prop="tendereeName" label="招标人名称" align="center"></el-table-column>
                    <el-table-column prop="bidAgencyName" label="招标代理名称" align="center"></el-table-column>
                    <el-table-column prop="" label="标段信息" min-width="140">
                        <template slot-scope="scope">
                            <div>
                                <span><span style="font-weight:600">标段编号:</span>{{scope.row.bidSectionNo || '-'}}</span>
                            </div>
                            <div>
                                <span><span style="font-weight:600">标段名称:</span>{{scope.row.bidSectionName || '-'}}</span>
                            </div>
                            <div>
                                <span><span style="font-weight:600">标段预算额:</span>{{scope.row.bidSectionAmount || '-'}}</span>
                            </div>
                            <div>
                                <span><span style="font-weight:600">标段地区:</span>{{scope.row.bidAreaName || '-'}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bidOpenTime" label="开标时间" align="center"></el-table-column>
                    <!-- <el-table-column prop="partnerName" label="合作方名称" min-width="100" align="center"></el-table-column> -->
                    <el-table-column prop="" label="结算金额(比例)" min-width="100" align="center">
                        <template slot-scope="scope">
                            {{scope.row.settAmount}} ({{scope.row.settRate}})
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>

    </div>
</template>

<script>

export default {
    components: { },
    props: {},
    data(){
        return{
            detailData:{},
            tableData:[],
            listStatus:[
                {value:'待确认',key:'1',type:'info'},
                {value:'待开票',key:'2',type:'warning'},
                {value:'待结算',key:'3',type:'primary'},
                {value:'已结算',key:'4',type:'success'},
            ]
        }
    },
    computed: {
        rowguid:function(){
            return this.getQuery('rowguid')
        }  
    },
    watch:{

    },
    methods: {
        getDetail:function(){
            this.$get(this.$store.getters.settUrl + '/hcgSettItem/'+this.rowguid,{

            }, function(data) {
                this.detailData = data.hcgItem;
                this.tableData = data.hcgOrderInfo;
            })
        },
        //导出
        exportList:function(){
            if(this.tableData.length !=0){
                var search = toSearch({
                    isExport: true,
                    token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
                });
                window.open('/bhtong/settmg/hcgSettItem/' + this.rowguid + search);
            }else{
                ShowMsg('当前清单暂无数据，暂不支持导出', 'warning');
            }
        },
        //返回
        goBack:function(){
            this.$router.go(-1);
        },
        //下载文件
        downloadFile:function(val){
            var search = toSearch({
                fileName:val
            });
            window.open('/bhtong/common/file/download' + search)
        },
        //筛选状态
        filterStatus:function(arr,val){
            let status =  arr.filter(function(item){
                return item.key == val ;
            })
            if(status != ''){
                return status[0]; //返回筛选的对象
            } else{
                return {};
            }
        },
    },
    mounted:function(){
        this.getDetail();   
    }
}
</script>

<style scoped lang="scss">
    .title{
        padding-bottom: 10px;
        border-bottom: 1px solid #e8e8e8
    }
    .order_list_title{
        line-height: 40px;
        span{
            padding-right: 10px;

        }
    }
    ::v-deep .el-table th > .cell {
        text-align: center;
    }
</style>

